<template>
  <div>
    <v-chart class="chart" ref="chart" :option="option" autoresize />
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent } from 'echarts/components'
import VChart from 'vue-echarts'

import { ecExport } from '@/utils'

import { axis } from '../config/axis'

use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent])

export default {
  name: 'barAndlineChart',
  components: {
    VChart
  },
  props: {
    chartData: {
      type: Object,
      default: () => ({})
    },
    nameY: {
      type: String,
      default: () => ''
    },
    nameX: {
      type: String,
      default: () => ''
    },
    FormData: {
      type: Array,
      default: () => []
    },
    dataX: {
      type: Array,
      default: () => []
    },
    toolboxShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
    option() {
      return {
        toolbox: {
          show: true,
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none'
            // },
            // dataView: { readOnly: false },
            // magicType: { type: ['line', 'bar'] },
            // restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          name: this.nameX,
          ...axis(),
          boundaryGap: true,
          data: this.FormData
        },
        yAxis: {
          name: this.nameY,
          ...axis(),
          type: 'value'
        },
        series: [
          {
            data: this.dataX,
            type: 'line'
          },
          {
            data: this.dataX,
            type: 'bar'
            // barWidth:40
          }
        ]
      }
    }
  },

  methods: {
    _ecExport(title = '') {
      ecExport(this.$refs.chart, title)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>